<template>
	<view>
		<view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">
			
		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<view style="position: relative;">
				<input type="text"   class="sou" placeholder-class="suo" v-model="keywords"
					placeholder="找人/找货/搜信息" confirm-type="search" @confirm="search" />
				<image src="https://dyeego.oss-cn-beijing.aliyuncs.com/uploads/20220325/91243acc628efa1338d3d38826d22484.png"
					class="souicon" mode=""></image>
			</view>
			<view class="fenlei">
				<swiper :indicator-dots="fl_xianshi" :class="['swiper',gaodu?'da_gao':'xiao_gao']">
					<swiper-item>
						<u-grid :border="false">
							<u-grid-item @click="tz_dianji(index,item.id,item.is_child,item.name)" :customStyle="{width:138+'rpx',height:138+'rpx'}"
								v-for="(item, index) in qyhyfl_list.slice(0,10)" :index="index" :key="index">
								<image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
								<view :class="index==tabindex?'actives':'as'"
									style="font-size: 24rpx;line-height: 30rpx;">
									{{item.name}}
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
					<swiper-item v-if="qyhyfl_list.length>10">
						<u-grid :border="false">
							<u-grid-item @click="tz_dianji(index+10,item.id,item.is_child,item.name)"
								:customStyle="{width:138+'rpx',height:138+'rpx'}"
								v-for="(item, index) in qyhyfl_list.slice(10,20)" :index="index + 10" :key="index">
								<image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
								<view :class="index+10==tabindex?'actives':'as'"
									style="font-size: 24rpx;line-height: 30rpx;">
									{{item.name}}
								</view>
							</u-grid-item>
						</u-grid>
					</swiper-item>
					<swiper-item v-if="qyhyfl_list.length>20">
						<u-grid :border="false">
							<u-grid-item @click="tz_dianji(index+20,item.id,item.is_child,item.name)"
								:customStyle="{width:138+'rpx',height:138+'rpx'}"
								v-for="(item, index) in qyhyfl_list.slice(20,30)" :index="index + 20" :key="index">
								<image :src="item.main_image" style="width: 80rpx;height: 80rpx;" mode=""></image>
								<view :class="index+20==tabindex?'actives':'as'"
									style="font-size: 24rpx;line-height: 30rpx;">
									{{item.name}}
								</view>
							</u-grid-item>
			   </u-grid>
					</swiper-item>
				</swiper>
			
			</view>
			<!-- <scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
					<view v-for="(tab,index) in qyhyfl_list" :key="tab.id" class="uni-tab-item" :id="tab.ids" :data-current="index" @click="ontabtap(index)">
					    <text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
						<image v-if="tabIndex==index" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
					</view>
			</scroll-view> -->
			<view style="width:100%;margin: 26rpx auto;display: flex;">
				<view  @click="jiage(1)" :class="tui_type==1?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					全部
				</view>
				<view v-if="pid==72" @click="jiage(3)" :class="tui_type==3?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{label3 || '出发地'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view v-if="pid==72" @click="jiage(4)" :class="tui_type==4?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{label4 || '目的地'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view  @click="jiage(2)" :class="tui_type==2?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{label2 || '位置'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<!-- <view v-if="pid!=72 && pid!=71" @click="jiage(3)" :class="tui_type==3?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{qihuo3 || '市场'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				<view v-if="pid!=72 && pid!=71" @click="jiage(4)" :class="tui_type==4?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					{{qihuo5 || '类型'}}<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view> -->
				
				
				<view v-if="pid==71" @click="jiage(5)" :class="tui_type==5?'tui_active':'tui_mei'" style="flex: 1;text-align: center;">
					生产线<text class="iconfont icon-xiangxia" style="font-size: 22rpx;"></text>
				</view>
				
			</view>
			
			<view @click="qyxq(item.id,item.special_manage,item.name)" v-for="(item,index) in qiye_list" :key='index'>
				<view v-if="item.special_manage==1" style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;" >
					<view style="overflow: hidden;">
						<view style="width: 35%;float: left;position: relative;">
							<image :src="item.logo_image" style="width: 190rpx;height: 190rpx;display: block;border-radius: 10rpx;left: 0;" mode="aspectFill"></image>
							<!-- <text style="color: #AF7300;font-size: 22rpx;padding: 6rpx 20rpx;background-color: #EFE0C3;position: absolute;top: 0;left: 0;border-top-left-radius: 10rpx;">
								{{item.client_position_text}}
							</text> -->
						</view>
						<view style="width: 65%;float: left;padding: 6rpx 0;">
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;" class="yihang">
								{{item.name}}
							</view>
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;overflow: hidden;">
								<text v-for="(a,b) in item.client_position_arr" :key='b' style="background: linear-gradient(0deg, #1fb0ac 0%, #5EC4C2 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;margin-bottom: 10rpx;">
									{{a.title || ''}}
								</text>
							</view>
							<view style="line-height: 30rpx;height: 60rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0;" class="erhang">
								主营：{{item.manage || '暂无主营'}}
							</view>
							<view v-if="item.city" style="line-height: 50rpx;color: #999999;font-size: 22rpx;">
								<text class="iconfont icon-dizhi2" style="color: #909193;font-size: 24rpx;"></text>
								{{item.city || ''}}-{{item.district || ''}}
							</view>
						</view>
					</view>
					<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
						<view style="flex: 1;">
							浏览量：{{item.views_num}} 
						</view>
						<view style="flex: 1;">
							关注数：{{item.attention_num}}人
						</view>
						<view style="flex: 1;">
							联系次数：{{item.contact_num || 0}}次
						</view>
					</view>
				</view>
				<view v-if="item.special_manage==2" style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;">
					<view style="overflow: hidden;">
						<view style="width: 35%;float: left;position: relative;">
							<image :src="item.logo_image"
								style="width: 190rpx;height: 190rpx;display: block;border-radius: 20rpx;left: 0;" mode="aspectFill"></image>
						</view>
						<view style="width: 65%;float: left;padding: 6rpx 0;">
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;"
								class="yihang">
								<text
									style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;">
									认证
								</text>
								{{item.name}}
							</view>
							<view style="overflow: hidden;line-height: 30rpx;margin: 10rpx 0;">
								<view style="width: 10%;float: left;">
									<image
										src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20564%402x.png"
										style="width: 30rpx;height: 30rpx;" mode=""></image>
								</view>
								<view style="color: #333333;font-size: 22rpx;width: 90%;float: left;">
									{{item.wl_address_text || ''}}
								</view>
							</view>
							<view style="overflow: hidden;line-height: 30rpx;">
								<view style="width: 10%;float: left;">
									<image
										src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/%E5%9B%BE%E5%B1%82%20565%402x.png"
										style="width: 30rpx;height: 30rpx;" mode=""></image>
								</view>
								<view style="color: #333333;font-size: 22rpx;width: 90%;float: left;">
									{{item.wl_main_text || ''}}
								</view>
							</view>
						</view>
					</view>
					<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
						<view style="flex: 1;">
							浏览量：{{item.views_num}}
						</view>
						<view style="flex: 1;">
							关注数：{{item.contact_num}}人
						</view>
						<view style="flex: 1;">
							联系次数：{{item.attention_num}}次
						</view>
					</view>
				</view>
				<view v-if="item.special_manage==3" style="box-sizing: border-box;padding: 30rpx 30rpx 0;background-color: #FFFFFF;margin-top: 26rpx;border-radius: 16rpx;" >
					<view style="overflow: hidden;">
						<view style="width: 35%;float: left;position: relative;">
							<image :src="item.logo_image" style="width: 190rpx;height: 190rpx;display: block;border-radius: 10rpx;left: 0;" mode="aspectFill"></image>
							<!-- <text style="color: #AF7300;font-size: 22rpx;padding: 6rpx 20rpx;background-color: #EFE0C3;position: absolute;top: 0;left: 0;border-top-left-radius: 10rpx;">
								{{item.client_position_text}}
							</text> -->
						</view>
						<view style="width: 65%;float: left;padding: 6rpx 0;">
							<view style="line-height: 40rpx;color: #010101;font-size: 32rpx;margin: 10rpx 0;" class="yihang">
								<text style="background: linear-gradient(0deg, #C18C26 0%, #E1AC4E 100%);border-radius: 6rpx;color: #FEFEFE;font-size: 22rpx;padding: 0rpx 10rpx;float: left;margin-right: 10rpx;">
									认证
								</text>
								{{item.name}}
							</view>
							<view style="line-height: 30rpx;color: #999999;font-size: 22rpx;margin: 10rpx 0;" class="sanhang">
								生产品类：{{item.process_text || '暂无生产品类'}}
							</view>
							<view v-if="item.city" style="line-height: 50rpx;color: #999999;font-size: 22rpx;">
								<text class="iconfont icon-dizhi2" style="color: #909193;font-size: 24rpx;"></text>
								{{item.city || ''}}-{{item.district || ''}}
							</view>
						</view>
					</view>
					<view style="display: flex;text-align: center;color: #999999;font-size: 22rpx;line-height: 100rpx;">
						<view style="flex: 1;">
							浏览量：{{item.views_num}} 
						</view>
						<view style="flex: 1;">
							关注数：{{item.attention_num}}人
						</view>
						<view style="flex: 1;">
							联系次数：{{item.contact_num || 0}}次
						</view>
					</view>
				</view>
			</view>
			<view v-if="qiye_kk" style="text-align: center;">
				<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20220329/e86889a9b8fd67d8950e4775d67316c.png" style="width: 400rpx;" mode="widthFix"></image>
			</view>
			<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="qiye_list.length==0"></u-divider>
			<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="qiye_list.length>0 && qiye_enmpy"></u-divider>
		</view>
		<!-- 企业 -->
		<lb-picker ref="picker3" v-model="qihuo3" mode="selector" :dataset="{ name: qihuo3 }" :list="list_arr3"
			@confirm="handleConfirm3">
		</lb-picker>
		<lb-picker ref="picker5" v-model="qihuo5" mode="selector" :dataset="{ name: qihuo5 }" :list="list_arr5"
			@confirm="handleConfirm5">
		</lb-picker>
		<lb-picker ref="picker6"
		  v-model="value2"
		  mode="multiSelector"
		  :list="list1"
		  :level="2"
		  :dataset="{ name: 'label2' }"
		  @confirm="handleConfirm4">
		</lb-picker>
		
		<lb-picker ref="picker7"
		  mode="multiSelector"
		  :list="list_arr6"
		  :level="2"
		  @confirm="handleConfirm7">
		</lb-picker>
		
		<lb-picker ref="picker8"
		  mode="multiSelector"
		  :list="list_arr6"
		  :level="2"
		  @confirm="handleConfirm8">
		</lb-picker>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import areaData from '@/sub/pages/area-data-min.js'
	export default{
		components: {
			LbPicker
		},
		data(){
			return{
				tabindex:0,
				tabIndex:0,
				scrollInto:'',
				qyhyfl_list:[],
				// 企业
				qihuo3:'',
				province:'',
				city:'',
				list_arr3:[],
				yuan_list_arr3:[],
				qihuo5:'',
				list_arr5:[],
				yuan_list_arr5:[],
				value2: [],
				label2: '',
				list1: areaData,
				qiye_enmpy:false,
				qiye_kk:false,
				qiye_page:1,
				qiye_list:[],
				tui_type:1,
				leixing:'',
				bazaar_id:'',
				keywords:'',
				firm_category_id:'',
				pid:'',
				fl_xianshi:false,
				gaodu:false,
				list_arr6:[],
				chufa_id:'',
				mudi_id:'',
				label3:'',
				label4:'',
				fanwei_list:[]
			}
		},
		onLoad(option) {
			// this.tabIndex=Number(option.type)+1
			this.pid=option.pid
			// console.log(this.tabIndex)
			uni.setNavigationBarTitle({
				title: option.name
			});
			this.chong()
			this.tuijian_shichang()
			this.leixing_list()
			this.shengshi()
		},
		onShow() {
			this.qiye_kk=false
			this.qiye_enmpy=false
			this.qiye_page=1
			this.qiye_list=[]
			this.qy_fl_list()
		},
		methods:{
			chong:function(){
				this.post('api/firm_data/delete_firm_process','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						
					}
				})
			},
			// 省市选择
			shengshi:function(){
				this.post('api/area/firm_area','',true).then(res=>{
					console.log(res,147)
					if(res.code==1){
						for(let i=0;i<res.data.length;i++){
							this.list_arr6.push({
								label:res.data[i].name,
								value:res.data[i].id,
								children:[]
							})
							// console.log(159)
							for(let j=0;j<res.data[i].child.length;j++){
								// console.log(159123)
								this.list_arr6[i].children.push({
									label:res.data[i].child[j].name,
									value:res.data[i].child[j].id
								})
							}
						}
					}
				})
				console.log(this.list_arr6,'liuyang123')
			},
			handleConfirm7(e) {
				console.log(e)
				let value=e.value
				this.label3=e.item.map(m => m.label).join('-')
				this.chufa_id=value[1]
				this.qiye_page=1
				this.qiye_list=[]
				this.qiye_enmpy=false
				this.qiye_kk=false
				this.qiye_lebiao()
			},
			handleConfirm8(e) {
				console.log(e)
				let value=e.value
				this.label4=e.item.map(m => m.label).join('-')
				this.mudi_id=value[1]
				this.qiye_page=1
				this.qiye_list=[]
				this.qiye_enmpy=false
				this.qiye_kk=false
				this.qiye_lebiao()
			},
			
			
			
			search:function(){
				this.qiye_enmpy=false
				this.qiye_kk=false
				this.qiye_page=1
				this.qiye_list=[]
				this.qiye_lebiao()
			},
			tz_dianji(index,id,status,name) {
				
				if(status==1){
					uni.navigateTo({
						url:'xia_qiye1?name='+name+'&pid='+id
					})
				}else{
					this.tabindex = index
					this.qiye_enmpy=false
					this.qiye_kk=false
					this.qiye_page=1
					this.qiye_list=[]
					this.firm_category_id=this.qyhyfl_list[this.tabindex].id
					this.qiye_lebiao()
				}
				
				
			},
			// 企业 推荐 分类
			qy_fl_list: function() {
				let that=this
				this.post('api/firm_data/category',{pid:this.pid}, true).then(res => {
					console.log(res, 123)
					if (res.code == 1) {
						let arr = [{
							name: '全部',
							id:this.pid,
							main_image: 'https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230413/8bfd4d306109650a72cdcc7741788c1b.png'
						}]
						this.qyhyfl_list = arr.concat(res.data)
						
						for(let i=0;i<this.qyhyfl_list.length;i++){
							this.qyhyfl_list[i]['ids']='a'+i
						}
						console.log(this.qyhyfl_list,123456)
						// this.scrollInto=this.qyhyfl_list[this.tabIndex].ids
						// uni.setNavigationBarTitle({
						// 	title: that.qyhyfl_list[this.tabIndex].name
						// });
						this.firm_category_id=this.qyhyfl_list[this.tabIndex].id
						this.qiye_lebiao()
						
					}
				})
			},
			ontabtap:function(index){
				let that=this
				this.tabIndex=index
				this.scrollInto = this.qyhyfl_list[index].ids;
				uni.setNavigationBarTitle({
					title: that.qyhyfl_list[this.tabIndex].name
				});
				this.qiye_kk=false
				this.qiye_enmpy=false
				this.qiye_page=1
				this.qiye_list=[]
				this.firm_category_id=this.qyhyfl_list[index].id
				this.qiye_lebiao()
			},
			jiage:function(index){
				this.tui_type=index
				if(index==2){
					this.$refs['picker6'].show()
				}else if(index==3){
					if(this.pid==72){
						this.$refs['picker7'].show()
					}else{
						this.$refs['picker3'].show()
					}
					
				}else if(index==4){
					if(this.pid==72){
						this.$refs['picker8'].show()
					}else{
						this.$refs['picker5'].show()
					}
				}else if(index==1){
					this.label3=''
					this.label4=''
					this.chufa_id=''
					this.mudi_id=''
					this.qihuo3=''
					this.province=''
					this.city=''
					this.qihuo5=''
					this.value2=[]
					this.label2=''
					this.bazaar_id=''
					this.leixing=''
					this.qiye_enmpy=false
					this.qiye_kk=false
					this.qiye_page=1
					this.qiye_list=[]
					this.chong()
					this.qiye_lebiao()
				}else if(index==5){
					uni.navigateTo({
						url:'/sub/pages/jiagong/scx'
					})
				}
			},
			// 企业
				// 推荐市场
				handleConfirm3(e) {
					let that=this
					let index=e.index[0] || e.index
					console.log(index,123456)
					this.bazaar_id=this.yuan_list_arr3[index].id
					this.qiye_page=1
					this.qiye_list=[]
					this.qiye_enmpy=false
					this.qiye_kk=false
					this.qiye_lebiao()
				},
				handleConfirm4 (e) {
				  // 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				  console.log('confirm::', e)
				  if (e) {
				    const name = e.dataset.name
				    const label = e.item.map(m => m.label).join('-')
				    if (name && label) {
				      this[name] = label
				    }
				  }
				  this.province=e.item[0].label
				   this.city=e.item[1].label
				   this.qiye_page=1
				   this.qiye_list=[]
				   this.qiye_enmpy=false
				   this.qiye_kk=false
				   this.qiye_lebiao()
				},
				// 推荐市场
				handleConfirm5(e) {
					let that=this
					let index=e.index[0] || e.index
					console.log(index,123456)
					this.leixing=this.yuan_list_arr5[index].title
					this.qiye_page=1
					this.qiye_list=[]
					this.qiye_enmpy=false
					this.qiye_kk=false
					this.qiye_lebiao()
				},
				// 推荐市场列表
				tuijian_shichang:function(){
					this.post('api/firm_data/bazaar','',true).then(res=>{
						console.log(res)
						if(res.code==1){
							this.yuan_list_arr3=res.data
							for(let i=0;i<res.data.length;i++){
								this.list_arr3.push(res.data[i].name)
							}
						}
					})
				},
				// 推荐类型列表
				leixing_list:function(){
					this.post('api/firm_data/get_type','',true).then(res=>{
						console.log(res)
						if(res.code==1){
							this.yuan_list_arr5=res.data
							for(let i=0;i<res.data.length;i++){
								this.list_arr5.push(res.data[i].title)
							}
						}
					})
				},
				// 企业列表
				qiye_lebiao:function(){
					let data={
						page:this.qiye_page,
						limit:10,
						type:this.leixing,
						province:this.province,
						city:this.city,
						bazaar_id:this.bazaar_id,
						keywords:this.keywords,
						manage_id:this.firm_category_id,
						place_address:this.chufa_id,
						des_address:this.mudi_id
					}
					this.post('api/firm_data',data,true).then(res=>{
						console.log(res)
						if(res.code==1){
							if(this.qiye_page==1){
								if (res.data.data== null || res.data.data.length == 0) {
									this.qiye_kk = true
									this.qiye_enmpy = true
									return
								} else if (res.data.data.length < 10) {
									this.qiye_enmpy = true
								}
							}else{
								if (res.data.data== null || res.data.data.length == 0) {
									this.qiye_enmpy = true
									return
								} else if (res.data.data.length < 10) {
									this.qiye_enmpy = true
								}
							}
							
							this.qiye_page++
							this.qiye_list.push(...res.data.data)
							console.log(this.qiye_list,123456789)
						}else{
							this.qiye_kk = true
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					})
				},
				// 企业详情
				qyxq:function(id,type,name){
					if(type==1){
						uni.navigateTo({
							url:'/fenbao/pages/wenzhang/qyxq?id='+id+'&name='+name
						})
					}else{
						uni.navigateTo({
							url:'wuliuqiye/wl_qyxq?id='+id+'&name='+name
						})
					}
					
				},
		}
	}
</script>

<style lang="scss">
	.fenlei {
		width: 100%;
		margin: 26rpx 0;
		background-color: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx 0 10rpx;
		overflow: hidden;
		border-radius: 10rpx;
	}
	.da_gao{
		height: 320rpx;
	}
	.xiao_gao{
		height: 160rpx;
	}
	.actives {
		color: #1fb0ac;
	}
	
	.as {
		color: #000000;
	}
	.tui_mei{
		color: #666666;
		font-size: 28rpx;
		font-weight: 500;
	}
	.tui_active{
		color: #000000;
		font-size: 28rpx;
		font-weight: 600;
	}
	page{
		background-color: #F8F8F8!important;
		font-family: Demibold;
	}
	.sou {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 0 30rpx 0 80rpx;
		background-color: rgba(255,255,255,.3);
	}
	.suo {
		color: #FFFFFF;
		opacity: 1;
		font-size: 26rpx;
	}
	
	.souicon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 30rpx;
		transform: translateY(-50%);
	
	}
	.scroll-h {
	    width: 100%;
		margin: 0 auto;
	    height: 80rpx;
		line-height: 80rpx;
	    flex-direction: row;
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	    /* flex-wrap: nowrap; */
	    /* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}
	
	.uni-tab-item {
	    /* #ifndef APP-PLUS */
	    display: inline-block;
	    /* #endif */
	    flex-wrap: nowrap;
		/* float: left; */
	    padding-left: 30rpx;
	    padding-right: 30rpx;
		position: relative;
		 display: inline-block;
	}
	.uni-tab-item:after{
		
	}
	.uni-tab-item:first-child:after{
		background: none;
	}
	.uni-tab-item-title {
	    height: 80rpx;
	    line-height: 80rpx;
	    flex-wrap: nowrap;
		font-size: 30rpx;
		color: rgba(255,255,255,.7);
	    /* #ifndef APP-PLUS */
	    white-space: nowrap;
	    /* #endif */
	}
	
	.uni-tab-item-title-active {
	    font-weight: 600;
	    font-size: 30rpx;
		color: #ffffff;
	}
</style>
